<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
        }

        .box ul {
            width: 3500px;
            height: 100%;
            position: absolute;
            left: 0px;
        }

        .box ul li {
            float: left;
            width: 500px;
            height: 300px;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            user-select: none;
        }

        .box .btnList {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .box .btnList li {
            float: left;
            width: 25px;
            height: 25px;
            background: #000;
            color: #fff;
            border-radius: 50%;
            margin-right: 10px;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
            user-select: none;
        }

        .box .btnList .active {
            background: green;
        }

        .box .btn {
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
        }

        .box .btn .leftBtn {
            float: left;
            width: 50px;
            height: 40px;
            background: rgba(99, 99, 99, 0.5);
            font-size: 30px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            user-select: none;
            border-radius: 0px 20px 20px 0px;
            color: #fff;
        }

        .box .btn .rightBtn {
            float: right;
            width: 50px;
            height: 40px;
            background: rgba(99, 99, 99, 0.5);
            font-size: 30px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            user-select: none;
            border-radius: 20px 0px 0px 20px;
            color: #fff;
        }
    </style>

<body>
    <div class="box">
        <ul class="list">
            <li style="background-color: pink;">1</li>
            <li style="background-color: greenyellow;">2</li>
            <li style="background-color: blueviolet;">3</li>
            <li style="background-color: orange;">4</li>
            <li style="background-color: salmon;">5</li>
            <li style="background-color: skyblue;">6</li>
        </ul>
        <div class="btn">
            <span class="leftBtn">&lt;</span>
            <span class="rightBtn">&gt;</span>
        </div>
        <ol class="btnList">
            <!-- 根据轮播图的张数得到的按钮列表 -->
            <!-- <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li> -->
        </ol>
    </div>

    <script src="js/utils.js"></script>
    <script>
        /*
            【1】根据轮播图渲染按钮列表
            【2】让轮播图走动，按钮的高亮跟着变化
            【3】点击按钮的时候 改变轮播图的切换
            【4】当鼠标移入 box 停止轮播图的移动
            【5】当鼠标移出box，重新开始轮播图的移动
            【6】点击左右切换按钮，也能移动 轮播图
        */
        // 获取需要用到的元素
        let box = document.querySelector('.box');
        let list = document.querySelector('.list');
        // 从list下面去获取满足条件的元素
        let lists = list.querySelectorAll('li');

        // 获取 按钮列表的父元素
        let btnList = document.querySelector('.btnList');

        // 获取左右点击按钮
        let leftBtn = document.querySelector('.leftBtn');
        let rightBtn = document.querySelector('.rightBtn');

        // 【1】循环轮播图的节点去添加按钮
        renderBtn(btnList, lists)

        // 获取 小圆点 元素
        let con = btnList.querySelectorAll('li');

        // 给轮播图的最后追加一个元素（跟第一个元素一样）
        let cloneFirst = list.firstElementChild.cloneNode(true);
        list.appendChild(cloneFirst)

        // 获取 按钮列表的父元素
        lists = list.querySelectorAll('li');


        // 【2】让轮播图运动起来
        let index = 0;
        let timer;
        let flag = true;
        autoPlay()

        // 【3】鼠标移入box的停止定时器
        box.onmouseover = function () {
            clearInterval(timer)
        }

        // 【4】鼠标移出box，重启定时器
        box.onmouseout = function () {
            autoPlay()
        }

        // 【5】点击左右按钮的时候 改变轮播图
        leftBtn.onclick = function () {
            /* 
                当index = 0的时候，显示的是第一个元素，如果还要往左切换，需要得到是 左后一个元素
                复制最后一个元素 添加到第一个元素的前面
            */
            if (flag) {
                flag = false
                index--;
                showActive();
                move(list, { left: index * (-500) }, function () {
                    flag = true;
                })
            }

        }

        rightBtn.onclick = function () {
            if (flag === true) {
                // 把状态改为false，动画还在执行，暂时不可以点击
                flag = false
                index++;
                showActive()
                move(list, { left: index * (-500) }, function () {
                    // 动画执行完之后把状态改回true，表示你又可以点击切换
                    flag = true;
                    if (index === lists.length - 1) {
                        index = 0;
                        // list的left设置0px
                        list.style.left = '0px';
                    }
                })
            }
        }


        function renderBtn(ele, arr) {
            // ele：你要把循环生成li添加到 那个元素中
            // arr:根据什么什么数据循环
            arr.forEach((item, index) => {
                if (index === 0) {
                    ele.innerHTML += `<li class="active">${index + 1}</li>`;
                    // 表示不执行return后面的代码
                    return
                }
                ele.innerHTML += `<li>${index + 1}</li>`;
            })
        }

        function autoPlay() {
            timer = setInterval(() => {
                index++;
                // 显示小圆点的高亮
                showActive();
                move(list, { left: index * (-500) }, function () {
                    if (index === lists.length - 1) {
                        index = 0;
                        // list的left设置0px
                        list.style.left = '0px';
                    }
                })
                // 1300 毫秒的时候执行下一次定时器
            }, 1300)
        }

        function showActive() {
            // 排他思想 先把所有的按钮高亮清除，然后给当前的这个按钮添加
            for (let i = 0; i < con.length; i++) {
                con[i].className = '';
            }
            // 因为 轮播图的元素会多一个 显示轮播图中最后一个图片的时候，实际上就是第一个元素 应该让第一个小圆点高亮
            if (index === lists.length - 1) {
                con[0].className = 'active';
            } else {
                con[index].className = 'active';
            }
        }


    </script>
</body>

</html>